<template>
    <template v-for="item in showChildren">
        <template v-if="item.type == 0">
            <!--  文档目录  -->
            <el-sub-menu :index="item.treeIndex">
                <template #title>
                    <span class="custom_menu_title">{{item.title}}</span>
                </template>
                <CustomMenuItem :children="item.children"></CustomMenuItem>
            </el-sub-menu>
        </template>
        <template v-else>
            <!--  文档内容  -->
            <el-menu-item :index="item.treeIndex">
                <template #title>
                    <span class="custom_menu_title">{{item.title}}</span>
                </template>
            </el-menu-item>
        </template>
    </template>
</template>
<script>

export default {
    name: 'custom-menu-item',
    props: {
        children: {
            type: Array,
            default: []
        }
    },
    data: function(){
        return {
            showChildren: this.children
        }
    },
    methods: {

    },
    created: function(){
        
    },
    watch: {
        children(newValue){
            this.showChildren = newValue;
        }
    }
}
</script>
<style>
.custom_menu_title{
    display: flex;
    width: auto;
    height: 100%;
    align-items: center;
}
</style>